import React from 'react'
import { connect } from 'react-redux'
// import {
//   BrowserRouter as Router,
//   Route,
//   Link,
//   Switch
// } from 'react-router-dom'
import { addNum,reduceNum,addNumAsync,reduceNumAsync } from './index.redux.js'

class App extends React.Component{
  render(){
    // const store = this.props.store
    const num = this.props.num
    const addNum = this.props.addNum
    const reduceNum = this.props.reduceNum
    const addNumAysnc = this.props.addNumAsync
    const reduceNumAysnc = this.props.reduceNumAsync
    return (
      <div>
        <h1>现在是值是{num}</h1>
        <button onClick={addNum}>加</button>
        <button onClick={reduceNum}>减</button>
        <button onClick={addNumAysnc}>加（等2秒）</button>
        <button onClick={reduceNumAysnc}>减（等2秒）</button>
      </div>
    )
  }
}

const mapStatetoProps =(state)=>{
  return {num:state.counter}
}

const actionCreators = {addNum, reduceNum, addNumAsync, reduceNumAsync}
// 会自己dispatch，直接写方法，不用写成store.dispatch(addNum())
App = connect(mapStatetoProps,actionCreators)(App)
export default App